<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">

    <h1 style="color: blue">SMALL-LOG日志平台</h1>
    <div class="head">
        <el-row :gutter="20">
            <el-col :span="6">
                <el-input v-model="userInfo.name" placeholder="appName"></el-input>
            </el-col>
            <el-col :span="6">
                <el-input v-model="userInfo.gender" placeholder="日志标题"></el-input>
            </el-col>
            <el-col :span="6">
                <el-input v-model="userInfo.phoneNum" placeholder="追踪码"></el-input>
            </el-col>
            <el-col :span="6">
                <el-date-picker
                        v-model="userInfo.birthday"
                        type="date"
                        placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
                        value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-col>
        </el-row>
<!--        <el-button type="primary" @click="addUser" class="add-bth">添加同学</el-button>-->
    </div>

    <div class="body">
        <template>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        label="序号"
                        width="180">
                    <!--scop为当前行：scope.row当前行信息-->
                    <template slot-scope="scope">
                        {{scope.$index + 1}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="appName"
                        label="标题"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="logLevel"
                        label="日志等级">
                </el-table-column>
                <el-table-column
                        prop="evn"
                        label="环境">
                </el-table-column>
                <el-table-column
                        prop="content"
                        label="内容">
                </el-table-column>

                    <el-table-column
                        prop="serverName"
                        label="IP地址">
                </el-table-column>

                <el-table-column
                        prop="birthday"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" @click="editUser(scope.row,scope.$index)" circle></el-button>
                        <el-button type="danger" icon="el-icon-delete" @click="delUser(scope.$index)" circle></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
    <!--弹框-->
    <el-dialog
            title="编辑用户信息"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
        <div>
            <el-form ref="form" :model="editObj" label-width="80px">
                <el-form-item label="姓名">
                    <el-input v-model="editObj.name"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-input v-model="editObj.gender"></el-input>
                </el-form-item>
                <el-form-item label="手机号码">
                    <el-input v-model="editObj.phoneNum"></el-input>
                </el-form-item>
                <el-form-item label="生日">
                    <el-date-picker
                            v-model="editObj.birthday"
                            type="date"
                            placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="confirm">确 定</el-button>
  </span>
    </el-dialog>
</div>

</body>
<!-- import Vue before Element -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>



<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                // 用户信息
                userInfo : {
                    name : '',
                    gender : '',
                    phoneNum : '',
                    birthday : ''
                },
                tableData: [

                ],
                // 弹框的显示
                dialogVisible: false,
                // 弹框的数据类
                editObj: {
                    name : '',
                    gender : '',
                    phoneNum : '',
                    birthday : ''
                },
                userIndex: 0
            }
        },
        created() {
            this.getList()
        },

        methods: {

            getList(){
                axios
                    .post('http://127.0.0.1:8003/getData')
                    .then(response => (this.tableData = response.data.records))
            },


            // 添加用户
            addUser(){
                //校验数据
                if (!this.userInfo.name) {
                    this.$message({
                        message: '请输入姓名！',
                        type: 'warning'
                    });
                    return;
                }
                if (!this.userInfo.gender) {
                    this.$message({
                        message: '请输入性别！',
                        type: 'warning'
                    });
                    return;
                }
                //正则校验
                if (!/^1[3456789]\d{9}$/.test(this.userInfo.phoneNum)) {
                    this.$message({
                        message: '请输入正确的电话号码！',
                        type: 'warning'
                    });
                    return;
                }
                if (!this.userInfo.birthday) {
                    this.$message({
                        message: '请输入生日！',
                        type: 'warning'
                    });
                    return;
                }
                //保存数据
                this.tableData.push(this.userInfo);
                //添加完后清空数据
                this.userInfo = {
                    name : '',
                    gender : '',
                    phoneNum : '',
                    birthday : ''
                };
            },
            // 删除一组数据
            delUser(index){
                this.$confirm('确认删除？')
                    .then(_ => {
                        this.tableData.splice(index,1);
                    })
                    .catch(_ => {});
            },
            //编辑数据
            editUser(item,idx){
                //确定是哪条数据
                this.userIndex = idx;
                this.editObj = {
                    name : item.name,
                    gender : item.gender,
                    phoneNum : item.phoneNum,
                    birthday : item.birthday
                };
                this.dialogVisible = true;
            },
            // 叉掉弹出框
            handleClose(){
                this.dialogVisible = false;
            },
            //确定编辑事件
            confirm(){
                this.dialogVisible = false;
                //渲染页面
                // Vue.set(vm.items, indexOfItem,newValue);
                Vue.set(this.tableData, this.userIndex,this.editObj);
            }


        }

    });
</script>
</html>